<template>
  <div>
    <base-text class="w100" content="测试BaseText组件，设置宽度，文字过长超出部分显示...，鼠标悬停显示全部文字"/>
    <base-text class="mgt10" @click="handleClick" content="测试BaseText组件点击事件"/>
    <base-text class="mgt10" @mouseenter="handleMouseenter" content="测试BaseText组件鼠标进入事件"/>
    <base-text class="mgt10" @mouseleave="handleMouseleave" content="测试BaseText组件鼠标移出事件"/>
  </div>
</template>

<script>
export default {
  name: 'Overview',
  methods: {
    handleEvent: text => window.alert(text),
    handleClick() {
      this.handleEvent('click');
    },
    handleMouseenter() {
      this.handleEvent('mouseenter');
    },
    handleMouseleave() {
      this.handleEvent('mouseleave');
    }
  }
};
</script>
